<template>
  <page-loading :show="pageLoading">
    <!-- 新建订单 - 列表页面 -->
    <view class="new-maintenance-container">
      <!-- 车辆信息 -->
      <car-info-header icon-show></car-info-header>

      <!-- 列表内容 -->
      <view class="list-content">
        <view class="title">当前到店报价</view>

        <view class="list">
          <view
            v-for="(item, index) in orderList"
            :key="index"
            class="item flex flex-ai-c flex-jc-sb"
            hover-class="hover-bg-color"
            @click="goOrderDetail(item)"
          >
            <view class="left">
              <view class="price">总计：{{ item.quotationPrice }}</view>
              <view class="date">{{ item.addtime }}</view>
            </view>

            <view class="right">
              <text class="mr-20">{{ item.statusStr }}</text>
              <u-icon name="arrow-right" size="24rpx" color="#999"></u-icon>
            </view>
          </view>
        </view>

        <!-- 没有数据 -->
        <default-img :show="isNotData" msg="暂无订单, 新建一个吧"></default-img>
      </view>

      <!-- 新建按钮 -->
      <view class="btn-create">
        <button class="btn-bg-yellow btn" @click="goCreateMaintenanceOrder()">
          新建报价单
        </button>
      </view>
    </view>
  </page-loading>
</template>

<script>
import carInfoHeader from '@/components/afterSales/carInfoHeader.vue'

export default {
  components: { carInfoHeader },
  data() {
    return {
      // 到店单列表
      orderList: [],
      isNotData: false,
      pageLoading: false, //初始化加载效果
    }
  },

  filters: {
    // handleStatus(val) {
    //   let status = {
    //     '0': '待提交',
    //     '1': '待付款',
    //     '2': '待施工'
    //   }
    //   return status[val]
    // }
  },

  onShow() {
    this.GetArriveQuotationList()
  },

  created() {
    // this.GetArriveQuotationList()
  },

  methods: {
    // 获取订单列表
    async GetArriveQuotationList() {
      if (this.pageLoading) {
        uni.showLoading()
      }
      try {
        const res = await this.$api.afterSales.GetArriveQuotationList({
          arriveId: this.$store.state.afterSales.arrvialId,
        })
        this.orderList = res.data
        if (res.data.length === 0) {
          this.isNotData = true
        }
        console.log(res.data)
      } catch (err) {
        console.log(err)
      }
      if (this.pageLoading) {
        uni.hideLoading()
      } else {
        this.pageLoading = true
      }
    },

    // 跳转订单详情
    goOrderDetail(data) {
      uni.navigateTo({
        url:
          '/pages_afterSales/submitOrderDetail/submitOrderDetail' +
          `?id=${data.quotationId}&isSubmit=${data.status}`,
      })
    },

    // 跳转到创建订单页面
    goCreateMaintenanceOrder(data) {
      uni.navigateTo({
        url: '/pages_afterSales/createMaintenanceOrder/createMaintenanceOrder',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.new-maintenance-container {
  min-height: 100vh;
  background-color: #f4f4f4;
}

// 列表内容
.list-content {
  padding: 0 24rpx 170rpx;

  .title {
    padding: 30rpx 0;
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
  }

  .list {
    .item {
      height: 120rpx;
      padding: 0 20rpx;
      background-color: #fff;
      border-radius: 10rpx;

      & + .item {
        margin-top: 20rpx;
      }

      .price {
        font-size: 30rpx;
        font-weight: 500;
        color: #333333;
      }

      .date {
        margin-top: 10rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #999999;
      }
    }
  }
}

// 固定底部按钮
.btn-create {
  position: fixed;
  bottom: 60rpx;
  left: 0;
  width: 100%;
  padding: 0 24rpx;

  .btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;

    &::after {
      border: 0;
    }
  }
}
</style>
